<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购审核列表</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" @click="userAdd()">用户添加</el-button>
    <!--数据表格-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                type="index"
                label="序号"
                width="50">
        </el-table-column>
        <el-table-column
                label="订单编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单类型"
        >
            <template slot-scope="scope">
                <span >{{scope.row.applicationType}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司名称"
        >
            <template slot-scope="scope">
                <span >{{scope.row.companyName}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品名称"
        >
            <template slot-scope="scope">
                <span >{{scope.row.productName}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.productNumber}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="需求数量"
        >
            <template slot-scope="scope">
                <span >{{scope.row.demandQuantity}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="需求部门"
        >
            <template slot-scope="scope">
                <span >{{scope.row.demandDepartment}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="申请人"
        >
            <template slot-scope="scope">
                <span >{{scope.row.applicant}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="付款方式"
        >
            <template slot-scope="scope">
                <span >{{scope.row.paymentMethod}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="申请时间"
        >
            <template slot-scope="scope">
                <span >{{scope.row.time}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="审核人"
        >
            <template slot-scope="scope">
                <span >{{scope.row.approver}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态"
        >
            <template slot-scope="scope">
                <span v-if="scope.row.applicationStatus==1">已审核</span>
                <span v-if="scope.row.applicationStatus==2">未审核</span>
                <span v-if="scope.row.applicationStatus==3">已驳回</span>
                <span v-if="scope.row.applicationStatus==4">已下单</span>
                <span v-if="scope.row.applicationStatus==5">未下单</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <div v-if="scope.row.applicationStatus==1">
                    <el-button
                            size="mini"
                            @click="passDesc(scope.$index, scope.row)">详细</el-button>
                </div>

                <div v-if="scope.row.applicationStatus==3">
                    <el-button
                            size="mini"
                            @click="failedDesc(scope.$index, scope.row)">详细</el-button>
                </div>

                <div v-if="scope.row.applicationStatus==2">
                    <el-button
                            size="mini"
                            @click="auditOrder(scope.$index, scope.row)">审核</el-button>
                </div>

            </template>
        </el-table-column>

    </el-table>
    <!--分页按钮-->
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>

    <!--弹出框-->
    <el-dialog title="审核" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="user">
            <el-form-item label="供应商名称" :label-width="formLabelWidth">
                <el-input v-model="user.companyName"  autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="user.productName"  autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="需求数量" :label-width="formLabelWidth">
                <el-input v-model="user.demandQuantity" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="产品编号" :label-width="formLabelWidth">
                <el-input v-model="user.productNumber" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="申请人" :label-width="formLabelWidth" >
                <el-input v-model="user.applicant" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="审核人" :label-width="formLabelWidth">
                <el-input v-model="user.approver" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="审核说明">
                <el-input id="aop" type="textarea" v-model="user.approvalDescription"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUser()">通 过</el-button>
            <el-button type="primary" @click="refuseUser()">拒 绝</el-button>
        </div>
    </el-dialog>
</div>

</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                tableData:null,
                line:null,
                total:0,
                current:1,
                pageSize:10,
                formLabelWidth:"120px",
                dialogFormVisible:false,
                user:{
                    id:'',
                    name:'',
                    type:'',
                    price:'',
                    img:'',
                },
            }
        },methods:{
            closeMyDialog(){
                this.dialogFormVisible=false;
                this.user={
                    id:'',
                    name:'',
                    type:'',
                    price:'',
                    img:''
                }
            },
            userAdd(){
                location.href="/buy/apply"
            },
            loadPage(current)
            {
                this.current = current;
                axios.get("/applyList/" + current).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.pageSize;
                    }
                });
            },
            auditOrder(index,row){//审核
                console.log(index);
                console.log(row);
                this.user=JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;

            },
            failedDesc(index,row){//驳回原因
                console.log(index);
                console.log(row);
            },
            passDesc(index,row){//通过查看详情
                console.log(index);
                console.log(row);
            },
            refuseUser(){//拒绝
                axios.put("/refuseAudit",this.user).then(value => {
                    if(value.data.code==1){
                        this.loadPage(1);
                        this.dialogFormVisible=false
                    }
                });
            },
            saveUser(){
                axios.put("/passAudit",this.user).then(value => {
                    if (value.data.code==1){
                        this.loadPage(1);
                        this.dialogFormVisible=false
                    }
                })
            }

        },mounted(){
            this.loadPage(1);
        }
    })
</script>
</html>